<template>
  <a-form ref="form"
          :model="formState"
          :rules="formRules"
          autocomplete="off"
          class="form"
          layout="vertical"
          @finish="handleSubmit">
    <a-form-item label="手机号" name="phoneNumber">
      <a-input v-model:value="formState.phoneNumber" placeholder="输入手机号" size="large">
        <template #prefix>
          <mobile-outlined style="color:rgba(0,0,0,.25)"/>
        </template>
      </a-input>
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input-password v-model:value="formState.password" placeholder="输入密码" size="large">
        <template #prefix>
          <lock-outlined style="color:rgba(0,0,0,.25)"/>
        </template>
      </a-input-password>
    </a-form-item>
    <a-button :loading="submitLoading" style="background: transparent;border: 2px solid #ffffff"  block class="submit" html-type="submit" size="large" type="primary">
      {{ loginButtonText }}
    </a-button>
  </a-form>
</template>

<script setup>
import {LockOutlined, MobileOutlined} from "@ant-design/icons-vue";

const props = defineProps(['loginButtonText', 'extraParams']);
const loginButtonText = computed(() => props.loginButtonText ?? '登录')

const form = ref(null);

const formState = reactive({
  phoneNumber: '',
  password: ''
});
const formRules = {
  phoneNumber: [
    {required: true, message: '请输入手机号'},
    {pattern: /^1\d{10}$/, message: '请输入正确的手机号'}
  ],
  password: [
    {required: true, message: '请输入密码'}
  ]
};

const {isLoading: submitLoading, execute: login} = useApi({
  method: 'POST',
  url: '/login/password',
  immediate: false
});
const router = useRouter();
const handleSubmit = async () => {
  await login({
    data: {
      ...formState,
      ...props.extraParams
    }
  });
  await router.push({
    path: '/'
  });
};
</script>
<style scoped lang="scss">
:deep(.ant-form-item-label){
  label{
    color: #fff;
  }
}
</style>
